import React from 'react';
import { Form, Row, DatePicker, Button, Select, Input, Col } from 'antd';
import moment from 'moment';
const FormItem = Form.Item;
const { Option } = Select;

const SearchForm = ({ form: { getFieldDecorator, getFieldsValue }, onSearch, onClick, advanced, searchItem, resetForm, modelList }) => {
  const onHandleAdvanced = () => {
    if (onClick) {
      onClick();
    }
  };

  const formItemLayout = {
    // 抽屉里面Form。二列的布局比例
    labelCol: {
      span: 6
    },
    wrapperCol: {
      span: 16
    }
  };
  return (
    <Form className="search-form">
      <Row gutter={24}>
        <Col span={5}>
          <FormItem label="批号"{...formItemLayout}>
            {getFieldDecorator('batchNo', {
              initialValue: searchItem.groupCode || '',
              getValueFromEvent: (event) => {
                return event.target.value.replace(/\s+/g, "")
              },
            })(<Input placeholder="请输入批号" maxLength={20} allowClear onPressEnter={() => onSearch(getFieldsValue())} />)}
          </FormItem>
        </Col>
        <Col span={5}>
          <FormItem label="机型"{...formItemLayout}>
            {getFieldDecorator('model', {
              initialValue: searchItem.model || undefined,
            })(
              <Select
                placeholder='请选择机型'
                allowClear
                showSearch
              >
                {
                  modelList && modelList.map(item => <Option key={item} value={item}>{item}</Option>)
                }
              </Select>
            )}
          </FormItem>
        </Col>
        <Col span={5}>
          <FormItem label="装配部门"{...formItemLayout}>
            {getFieldDecorator('workShopCode', {
              initialValue: searchItem.workShopCode || '',
              getValueFromEvent: (event) => {
                return event.target.value.replace(/\s+/g, "")
              },
            })(<Input placeholder="请输入装配部门" maxLength={20} allowClear onPressEnter={() => onSearch(getFieldsValue())} />)}
          </FormItem>
        </Col>
        <Col span={5}>
          <FormItem label="数据来源"{...formItemLayout}>
            {getFieldDecorator('importFrom', {
              initialValue: searchItem.importFrom || undefined
            })(
              <Select placeholder='请选择数据来源' allowClear >
                <Option value={'1'}>文件导入</Option>
                <Option value={'2'}>ERP接口</Option>
              </Select>
            )}
          </FormItem>
        </Col>
        <Col span={4} style={{ display: 'flex' }} className="serarch-btns">
          <FormItem>
            <Button icon="search" type="primary" onClick={() => onSearch(getFieldsValue())}>
              {'查询'}
            </Button>
          </FormItem>
          <FormItem>

            <Button type="primary" icon={advanced ? 'up' : 'down'} onClick={() => onHandleAdvanced()}>
              {'展开'}
            </Button>
          </FormItem>
          <FormItem>

            <Button type="default" icon={'redo'} onClick={() => resetForm()}>
              {'重置'}
            </Button>
          </FormItem>
        </Col>
      </Row>
      <Row gutter={24}>
        {
          advanced ? <Col span={5}>
            <FormItem label="创建时间"{...formItemLayout}>
              {getFieldDecorator('createTimeStart', {
                initialValue: searchItem.createTimeStart ? moment(searchItem.createTimeStart) : null
              })(
                <DatePicker placeholder='请选择创建时间' allowClear style={{ width: '100%' }} />
              )}
            </FormItem>
          </Col> : ''
        }

      </Row>

    </Form>
  );
};

export default Form.create()(SearchForm);
